<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__STATIC__/theme/css/amazeui.min.css?v={:date('ymd')}" rel="stylesheet">

</head>
<body>

<style>
    body {
        background-color: #f2f2f2;
    }

    .widget {
        width: 100%;
        min-height: 148px;
        border-radius: 0;
        position: relative;
        padding: 10px 20px 13px;
        background-color: #fff;
        color: #333;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }

    /* 后台首页 */
    .page-home .widget {
        padding: 10px 20px 25px;
    }

    .page-home .widget .widget-head {
        margin-top: 0;
        margin-bottom: 10px;
        border-bottom: none;
    }

    .page-home .widget .widget-body {
        padding: 0;
    }

    .page-home .widget-outline {
        flex-basis: 50%;
        height: 117px;
        padding: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    .page-home .widget-outline .outline-left {
        margin-right: 30px;
    }

    .page-home .widget-outline .outline-left img {
        width: 58px;
        height: 58px;
    }

    .page-home .widget-outline .outline-right {
        flex-basis: 50%;
    }

    .page-home .widget-echarts {
        height: 400px;
        width: 100%;
    }

    .page-home .widget-card {
        min-height: 174px;
        color: #ffffff;
        padding: 12px 17px 12px 22px;
        margin-bottom: 20px;
    }

    .page-home .widget-card.card__blue {
        background: linear-gradient(-125deg, #57bdbf, #2f9de2);
    }

    .page-home .widget-card.card__red {
        background: linear-gradient(-125deg, #ff7d7d, #fb2c95);
    }

    .page-home .widget-card.card__violet {
        background: linear-gradient(-113deg, #c543d8, #925cc3);
    }

    .page-home .widget-card.card__primary {
        background: linear-gradient(-141deg, #ecca1b, #f39526);
    }

    .page-home .widget-card .card-header {
        position: relative;
        display: block;
        padding-top: 18px;
        color: #fff;
        font-size: 1.4rem;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    .page-home .widget-card .card-icon {
        position: absolute;
        right: 30px;
        top: 24px;
        font-size: 70px;
        color: rgba(255, 255, 255, 0.12);
    }

    .page-home .widget-card .card-description {
        position: relative;
        display: block;
        font-size: 1.2rem;
        line-height: 1.2rem;
        padding-top: 8px;
        color: rgba(255, 255, 255, 0.88);
    }

    .page-home .widget-card .card-value {
        position: relative;
        font-weight: 300;
        display: block;
        color: #fff;
        font-size: 46px;
        line-height: 46px;
        margin-bottom: 8px;
    }

    .row-content {
        padding: 15px;
    }

    .row {
        margin-right: -10px;
        margin-left: -10px;
    }
</style>

<!-- 内容区域 start -->
<div class="tpl-content-wrapper">
    <div class="page-home row-content am-cf">

        <!-- 商城统计 -->
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">数据统计</div>
                    </div>
                    <div class="widget-body am-cf">
                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                            <div class="widget-card card__blue am-cf">
                                <div class="card-header">报名总量</div>
                                <div class="card-body">
                                    <div class="card-value">{$data.item_num}</div>
                                    <div class="card-description">当前项目报名总量</div>
                                    <span class="card-icon iconfont icon-goods"></span>
                                </div>
                            </div>
                        </div>


                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                            <div class="widget-card card__primary am-cf">
                                <div class="card-header">访问总量</div>
                                <div class="card-body">
                                    <div class="card-value">{$data.view_count}</div>
                                    <div class="card-description">页面浏览总数量</div>
                                    <span class="card-icon iconfont icon-haoping2"></span>
                                </div>
                            </div>
                        </div>


                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                            <div class="widget-card card__violet am-cf">
                                <div class="card-header">-</div>
                                <div class="card-body">
                                    <div class="card-value">-</div>
                                    <div class="card-description">-</div>
                                    <span class="card-icon iconfont icon-order"></span>
                                </div>
                            </div>
                        </div>

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                            <div class="widget-card card__red am-cf">
                                <div class="card-header">-</div>
                                <div class="card-body">
                                    <div class="card-value">-</div>
                                    <div class="card-description">-</div>
                                    <span class="card-icon iconfont icon-user"></span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- 实时概况 -->
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
                <div class="widget am-cf">
                    <div class="widget-head">
                        <div class="widget-title">实时报名概况</div>
                    </div>
                    <div class="widget-body am-cf">
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src=""
                                         alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-between">
                                    <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">今日报名</div>
                                    <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">{$data.today}</div>
                                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                        昨日报名：{$data.yesterday}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                            <div class="widget-outline dis-flex flex-dir-column flex-x-between">
                                <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">-</div>
                                <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">0</div>
                                <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                    -：0
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                            <div class="widget-outline dis-flex flex-y-center">
                                <div class="outline-left">
                                    <img src=""
                                         alt="">
                                </div>
                                <div class="outline-right dis-flex flex-dir-column flex-x-between">
                                    <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">-</div>
                                    <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">0</div>
                                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                        昨日：0
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                            <div class="widget-outline dis-flex flex-dir-column flex-x-between">
                                <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">-</div>
                                <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">0</div>
                                <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                    昨日：0
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>
<!-- 内容区域 end -->

</body>
</html>